<template>
  <div class="one__wrap">
    <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="用户名" prop="project">
        <a-input
            placeholder="用户名如：abc"
            v-model="form.auth"
        />

      </a-form-model-item>
<!--      <a-form-model-item label="生成路径" prop="project">-->
<!--        <a-input-->
<!--            v-model="form.outPath"-->
<!--        />-->

<!--      </a-form-model-item>-->

      <a-form-model-item label="原Excel" extra="">
        <a-upload
            name="excel"
            :multiple="false"
            action="http://localhost:8088/uploadFile"
            @change="handleChange"
        >
          <a-button>
            <a-icon type="upload"/>
            Click to upload
          </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="新Excel" extra="">
        <a-upload
            name="excel"
            :multiple="false"
            action="http://localhost:8088/uploadFile"
            @change="handleChange1"
        >
          <a-button>
            <a-icon type="upload"/>
            Click to upload
          </a-button>
        </a-upload>
      </a-form-model-item>


      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          Create
        </a-button>
        <a-button style="margin-left: 10px;" @click="resetForm">
          Reset
        </a-button>
      </a-form-model-item>

    </a-form-model>


  </div>
</template>

<script>
export default {
  name: "three",
  data() {
    return {
      textarea: '',
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      other: '',
      form: {
        auth:'',
        oldPath:'',
        activePath:'',
      },
      rules: {
        date1: [{required: true, message: 'Please pick a date', trigger: 'change'}],
        type: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
          },
        ],
        resource: [
          {required: true, message: 'Please select activity resource', trigger: 'change'},
        ],
        desc: [{required: true, message: 'Please input activity form', trigger: 'blur'}],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          alert('确认提交吗？');
          console.log(this.form)
          const { data: res } = await this.$axios({
            method: 'post',   // 方法
            url: 'http://localhost:8088/updateSql',  // 地址
            data: this.form
          })
          console.log('res',res)
          if (res.code === 200){
            this.$message.success('生成成功');
            window.open('http://localhost:8088/'+res.data);
          }else {
            this.$message.error('生成失败')
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    handleChange(info) {
      console.log('info',info)
      if (info.file.response.code === 200) {
        this.$message.success('上传成功')
        this.form.oldPath = info.file.response.data
      } else {
        this.$message.error('上传失败')

      }
    },
    handleChange1(info) {
      if (info.file.response.code === 200) {
        this.$message.success('上传成功')
        this.form.activePath = info.file.response.data
      } else {
        this.$message.error('上传失败')

      }
    },
  }
}
</script>

<style lang="less" scoped>
.one__wrap {
  width: 100%;
  height: 100%;

}
</style>
